<template>
  <div>
    <div class="analysisGeneration-title2">
      <span class="mr-12">title标题设置</span>
      <el-input v-model="propsData.titleName" placeholder="title标题设置" class="mr-12 wd250"></el-input>
      <el-button type="warning" @click="dataValidationClick" class="ml-12">title数据验证</el-button>
    </div>
    <div class="analysisGeneration-title mt-12">
      <span></span>
      <label>title按钮配置</label>
      <div class="s"></div>
      <template>
        <div class="n" @click="addButClick">
          <i class="el-icon-edit"></i>
          添加表头按钮
        </div>
      </template>
    </div>


    <div class="analysisGeneration-design-api-content">
      <el-table ref="table" :data="propsData.titleProp.butArray" border style="width: 100%" :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
                :default-sort = "{prop: 'sort', order: 'ascending'}">
        <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
        <el-table-column label="按钮名称" min-width="150" :show-overflow-tooltip="true" align="center" prop="name"/>
        <el-table-column label="按钮方法名称" min-width="150" :show-overflow-tooltip="true" align="center" prop="methodName"/>
        <el-table-column label="按钮图标" min-width="150" :show-overflow-tooltip="true" align="center" prop="icon">
          <template slot-scope="scope">
            <i :class="scope.row.icon" style="font-size:20px"></i>
          </template>
        </el-table-column>
        <el-table-column label="按钮颜色" min-width="150" :show-overflow-tooltip="true" align="center" prop="color">
          <template slot-scope="scope">
            <template v-for="item in $store.state.butColorOptions">
              <template v-if="scope.row.color==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="按钮属性" min-width="150" :show-overflow-tooltip="true" align="center" prop="butType">
          <template slot-scope="scope">
            <template v-for="item in $store.state.titleButTypeOption">
              <template v-if="scope.row.butType==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="其它数据" min-width="150" :show-overflow-tooltip="true" align="center" prop="formName"/>
        <el-table-column label="排序" width="80" :show-overflow-tooltip="true" align="center" sortable prop="sort" :sort-method="(a,b)=>{return a.sort - b.sort}">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" placeholder="排序"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="190" align="center">
          <template slot-scope="scope" v-if="scope.row.butType!='清空设置'">
            <el-button type="primary" icon="el-icon-view el-icon--left" @click="editClick(scope.row,scope.$index)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete el-icon--left" @click="delClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!--新增title按钮dialog-->
    <el-dialog
        :append-to-body="true"
        :show-close="true"
        :title="dialogData.title"
        :visible.sync="dialogData.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="dialogDataClose"
        width="600px"
    >
      <el-form :model="dialogData.formData" ref="api-form" class="analysisGeneration-form-dialog">
        <el-form-item label="按钮类型" prop="butType" class="s" :rules="[{ required: true, message: '请选择按钮类型', trigger: 'blur' }]">
          <el-select v-model="dialogData.formData.butType" @change="butTypeChange" placeholder="请选择按钮类型" clearable>
            <el-option
                v-for="item in $store.state.titleButTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="按钮名称" prop="name" class="s" :rules="[{ required: true, message: '请输入按钮名称', trigger: 'blur' }]">
          <el-input v-model="dialogData.formData.name" placeholder="请输入按钮名称" clearable></el-input>
        </el-form-item>
        <template v-if="!['新增按钮','清空设置'].includes(dialogData.formData.butType)">
          <el-form-item label="按钮方法名称" prop="methodName" class="s" :rules="[{ required: true, message: '请输入按钮方法名称', trigger: 'blur' }]">
            <el-input v-model="dialogData.formData.methodName" placeholder="请输入按钮方法名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="按钮图标" prop="icon" class="s" :rules="[{ required: true, message: '请输入按钮图标', trigger: 'blur' }]">
            <e-icon-picker v-model="dialogData.formData.icon">
              <template #prepend="{icon}">
                <e-icon :icon-name="icon" class="e-icon"/>
              </template>
              <template #icon="{icon}">
                <e-icon :icon-name="icon" class="e-icon"/>
              </template>
            </e-icon-picker>
          </el-form-item>
          <el-form-item label="按钮颜色" prop="color" class="s" :rules="[{ required: true, message: '请选择按钮颜色', trigger: 'blur' }]">
            <el-select v-model="dialogData.formData.color" placeholder="请选择请求方式" clearable>
              <el-option
                  v-for="item in $store.state.butColorOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="导入接口" prop="formName" class="s" :rules="[{ required: true, message: '请输入导入接口', trigger: 'blur' }]"
                        v-if="['直接导入'].includes(dialogData.formData.butType)">
            <el-input v-model="dialogData.formData.formName" placeholder="请输入导入接口" clearable></el-input>
          </el-form-item>
          <el-form-item label="表单名称" prop="formName" class="s" :rules="[{ required: true, message: '请选择表单名称', trigger: 'blur' }]"
                        v-if="['对话框后导入','对话框后导出','其它按钮'].includes(dialogData.formData.butType)">
            <el-select v-model="dialogData.formData.formName" placeholder="请选择表单名称">
              <el-option
                  v-for="item in propsData.formProp.contentArray"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="模板名称" prop="formName" class="s" :rules="[{ required: true, message: '请输入模板名称', trigger: 'blur' }]"
                        v-if="['下载模板'].includes(dialogData.formData.butType)">
            <el-input v-model="dialogData.formData.formName" placeholder="请输入模板名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="导出接口" prop="formName" class="s" :rules="[{ required: true, message: '请输入导出接口', trigger: 'blur' }]"
                        v-if="['直接导出'].includes(dialogData.formData.butType)">
            <el-input v-model="dialogData.formData.formName" placeholder="请输入导出接口" clearable></el-input>
          </el-form-item>
        </template>
        <el-form-item label="排序" prop="sort" class="s" :rules="[]">
          <el-input v-model="dialogData.formData.sort" placeholder="请输入排序" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDataClose">取 消</el-button>
        <el-button type="primary" @click="dialogDataSub">确 定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
// import draggable from 'vuedraggable'

export default {
  components: {},
  props: ['propsData'],
  data() {
    return {
      //新增title按钮dialog
      dialogData: {
        title: '新增表头按钮',
        isDialog: false,
        formData: {
          id: '',
          name: '',//按钮名称
          methodName: 'titleClick',//按钮方法名称
          icon: 'el-icon-check',//按钮图标
          color: 'white',//按钮颜色
          butType: '其它按钮',//按钮类型
          formName: '',//表单名称-下载模板名称-导出的接口
          sort: '10',//排序 从小到大
        },
      },

    };
  },
  mounted() {
  },
  methods: {
    //title数据验证
    dataValidationClick() {
      console.log(this.propsData.titleProp.butArray)
      let num = 0;//新增按钮个数
      let num1 = 0;//清空设置 按钮个数
      for (let i = 0; i < this.propsData.titleProp.butArray.length; i++) {
        if (this.propsData.titleProp.butArray[i].butType == '新增按钮') {
          num = num + 1;
        }
        if (this.propsData.titleProp.butArray[i].butType == '清空设置') {
          num1 = num1 + 1;
        }
        if (['直接导入', '直接导出'].includes(this.propsData.titleProp.butArray[i].butType)) {
          if (this.propsData.titleProp.butArray[i].formName.substring(0, 1) != '/') {
            this.$message.error(`${i + 1}---其它数据需要以/开头`);
            return false
          }
        }
      }
      if (num > 1) {
        this.$message.error(`不能有二个新增按钮`);
        return false
      }
      if (num1 > 1) {
        this.$message.error(`不能有二个清空设置按钮`);
        return false
      }

      this.$message.success(`title暂无错误`);
    },
    //按钮类型下拉
    butTypeChange(val) {
      switch (val) {
        case '新增按钮':
          this.dialogData.formData.name = '新增';//按钮名称
          this.dialogData.formData.methodName = 'titleAddClick';//按钮方法名称
          this.dialogData.formData.icon = 'el-icon-plus';//按钮图标
          this.dialogData.formData.color = 'primary';//按钮颜色
          this.dialogData.formData.formName = '';//表单名称-下载模板名称-导出的接口
          this.dialogData.formData.sort = '0';//排序 从小到大
          break;
        case '直接导入':
          this.dialogData.formData.name = '批量导入';//按钮名称
          this.dialogData.formData.methodName = 'titleImportDirectlyClick';//按钮方法名称
          this.dialogData.formData.icon = 'el-icon-download';//按钮图标
          this.dialogData.formData.color = 'warning';//按钮颜色
          this.dialogData.formData.formName = '/api/import.do';//表单名称-下载模板名称-导出的接口
          this.dialogData.formData.sort = '10';//排序 从小到大
          break;
        case '对话框后导入':
          this.dialogData.formData.name = '批量导入';//按钮名称
          this.dialogData.formData.methodName = 'titleImportDirectlyClick';//按钮方法名称
          this.dialogData.formData.icon = 'el-icon-download';//按钮图标
          this.dialogData.formData.color = 'warning';//按钮颜色
          this.dialogData.formData.formName = '';//表单名称-下载模板名称-导出的接口
          this.dialogData.formData.sort = '10';//排序 从小到大
          break;
        case '下载模板':
          this.dialogData.formData.name = '下载导入模板';//按钮名称
          this.dialogData.formData.methodName = 'titleDownloadImportTemplate';//按钮方法名称
          this.dialogData.formData.icon = 'el-icon-finished';//按钮图标
          this.dialogData.formData.color = 'success';//按钮颜色
          this.dialogData.formData.formName = '';//表单名称-下载模板名称-导出的接口
          this.dialogData.formData.sort = '10';//排序 从小到大
          break;
        case '直接导出':
          this.dialogData.formData.name = '批量导出';//按钮名称
          this.dialogData.formData.methodName = 'exportXlsx';//按钮方法名称
          this.dialogData.formData.icon = 'el-icon-upload2';//按钮图标
          this.dialogData.formData.color = 'info';//按钮颜色
          this.dialogData.formData.formName = '/api/export.do';//表单名称-下载模板名称-导出的接口
          this.dialogData.formData.sort = '10';//排序 从小到大
          break;
        case '对话框后导出':
          this.dialogData.formData.name = '批量导出';//按钮名称
          this.dialogData.formData.methodName = 'exportXlsx';//按钮方法名称
          this.dialogData.formData.icon = 'el-icon-upload2';//按钮图标
          this.dialogData.formData.color = 'info';//按钮颜色
          this.dialogData.formData.formName = '';//表单名称-下载模板名称-导出的接口
          this.dialogData.formData.sort = '10';//排序 从小到大
          break;
        case '清空设置':
          this.dialogData.formData.name = '清空设置';//按钮名称
          this.dialogData.formData.methodName = 'tabsOrTableDialogEmpty';//按钮方法名称
          this.dialogData.formData.icon = 'el-icon-refresh';//按钮图标
          this.dialogData.formData.color = 'danger';//按钮颜色
          this.dialogData.formData.formName = '';//表单名称-下载模板名称-导出的接口
          this.dialogData.formData.sort = '100';//排序 从小到大
          break;
        case '其它按钮':
          this.dialogData.formData.name = '';//按钮名称
          this.dialogData.formData.methodName = 'titleClick';//按钮方法名称
          this.dialogData.formData.icon = 'el-icon-check';//按钮图标
          this.dialogData.formData.color = 'warning';//按钮颜色
          this.dialogData.formData.formName = '';//表单名称-下载模板名称-导出的接口
          this.dialogData.formData.sort = '10';//排序 从小到大
          break;
      }


    },
    //新增表头按钮
    addButClick() {
      this.dialogData.title = '新增表头按钮';
      this.dialogData.isDialog = true;
    },
    //编辑
    editClick(row) {
      this.dialogData.title = '编辑表头按钮';
      let jsonData = JSON.parse(JSON.stringify(row))
      this.dialogData.formData = jsonData;
      for (let i = 0; i < this.propsData.titleProp.butArray.length; i++) {
        if(this.propsData.titleProp.butArray[i].methodName == row.methodName){
          this.dialogData.formData.id = i;
        }
      }
      this.dialogData.isDialog = true;
    },
    //删除
    delClick(row) {
      for (let i = 0; i < this.propsData.titleProp.butArray.length; i++) {
        if (this.propsData.titleProp.butArray[i] == row) {
          this.propsData.titleProp.butArray.splice(i, 1);
          return false
        }
      }
    },
    //确定
    dialogDataSub() {
      this.$refs['api-form'].validate((valid) => {
        if (valid) {
          console.log('id',this.dialogData.formData)
          if (this.dialogData.formData.id !== '') {
            console.log(this.propsData.titleProp.butArray)
            //改
            let butArray = JSON.parse(JSON.stringify(this.propsData.titleProp.butArray));
            butArray.splice(this.dialogData.formData.id, 1); //先删了
            let num = 0;
            for (let i = 0; i < butArray.length; i++) {
              if (butArray[i].methodName == this.dialogData.formData.methodName) {
                num = num + 1
              }
            }
            if (num > 0) {
              this.$message.error('改-方法名重复');
              return false
            } else {
              this.propsData.titleProp.butArray[this.dialogData.formData.id] = this.dialogData.formData;
              this.$store.state.randomKey = this.Utils.createRandomKey();
            }
          } else {
            //增
            for (let i = 0; i < this.propsData.titleProp.butArray.length; i++) {
              if (this.propsData.titleProp.butArray[i].methodName == this.dialogData.formData.methodName) {
                this.$message.error(`增-方法名重复`);
                return false
              }
            }
            this.propsData.titleProp.butArray.push(this.dialogData.formData);
          }

          this.dialogDataClose();
        }
      })
    },
    //取消
    dialogDataClose() {
      this.dialogData = this.$options.data().dialogData;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
